<template>
  <div style="margin-top: 5px;">
    <titleBox text="应急预练" @click="show = !show"></titleBox>
    <div class="content"
      :style="{ height: show ? height + 'px' : '0px', transition: 'height 0.5s ease-in-out', overflow: 'hidden' }">
      <div ref="content" style="padding:10px;border: 1px solid #11afc180;">
        <div id="outer-container" v-if="list">
          <div id="inner-container">
            <div v-for="(item, i) in list" :key="i" class="item">
              <img class="img" :src="item.image" />
              <div class="title">{{ item.name }}</div>
            </div>
            <div v-for="(item, i) in list" :key="i" class="item">
              <img class="img" :src="item.image" />
              <div class="title">{{ item.name }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import $api from "@/utils/request.js"
import { ref, onMounted, nextTick } from "vue"
import titleBox from "../mConponents/titleBox.vue"
onMounted(() => {
  getData()
})
const content = ref(null)
const height = ref(0)
const show = ref(false)
const getData = async () => {
  const res = await $api.get("api/V1/getyjyl")
  if (res.code === 1) {
    list.value = res.data
    nextTick(() => {
      height.value = content.value.offsetHeight
      // show.value = true
    })
  }
}
const list = ref([])
</script>
<style scoped lang="less">
.content {
  background-color: #001a1dcc;
  width: 330px;
  margin-top: 5px;

  // display: flex;
  // align-items: center;
  // justify-content: space-between;
  .item {
    display: inline-block;
    width: 150px;

    margin-right: 5px;

    .img {
      width: 150px;
      height: 100px;
    }

    .title {
      color: #D5F2FF;
      margin: 5px 0;
      font-size: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
}

#outer-container {
  width: 100%;
  /* 设置外部容器宽度 */
  overflow: hidden;
  /* 隐藏溢出部分 */
}

#inner-container {
  display: inline-block;
  white-space: nowrap;
  /* 防止文字换行 */
  animation: scrollLeft 20s linear infinite;
  /* 使用动画让整个容器向左滚动 */
}

// .item {
//   display: inline-block;
//   width: 100px;
//   height: 100px;
//   background-color: lightblue;
//   margin: 5px;
// }

/* 定义动画 */
@keyframes scrollLeft {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-50%));
    /* 加上一些额外的空白，以便滚动到最后一个元素时不会立即切换 */
  }
}
</style>
